<template>
  <view>
    <view class="fixed_tabbar u-f-ac">
      <view class="u-f-ajc u-f-column tabbar_item" v-for="(item, index) in tabbarList" :key="index"
        @click="goPath(index)">
        <image :src="item.active" mode="widthFix" v-if="tabbar == index"></image>
        <image :src="item.image" mode="widthFix" v-else></image>
        <view>{{item.name}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: ['tabbar'],
    data() {
      return {
        tabbarList: [{
            active: '/static/images/caidan/tabbar1_active.png',
            image: '/static/images/caidan/tabbar1.png',
            name: '兑换彩蛋',
            path: '/mine-module/caidan/index',
          },
          {
            active: '/static/images/caidan/tabbar2_active.png',
            image: '/static/images/caidan/tabbar2.png',
            name: '任务',
            path: '/mine-module/caidan/renwu',
          },
          {
            active: '/static/images/caidan/tabbar3_active.png',
            image: '/static/images/caidan/tabbar3.png',
            name: '颜色积分',
            path: '/mine-module/caidan/yansejifen',
          },
          {
            active: '/static/images/caidan/tabbar4_active.png',
            image: '/static/images/caidan/tabbar4.png',
            name: '中奖纪录',
            path: '/mine-module/caidan/zhongjiangjilu',
          },
        ],
      }
    },
    methods: {
      goPath(index) {
        if (this.tabbar != index) {
          uni.redirectTo({
            url: this.tabbarList[index].path
          })
        }
      },
    },
  }
</script>

<style lang="scss">
  .fixed_tabbar {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #fff;
    color: #999999;
    border-radius: 40rpx 40rpx 0 0;

    .tabbar_item {
      width: 25%;
      padding: 20rpx 0;

      image {
        width: 50rpx;
      }

      view {
        font-size: 24rpx;
        margin-top: 4rpx;
      }
    }

    .active {
      color: #FB4961;
    }
  }
</style>